<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back>
				<view slot="title">
					<view id="title" class="fw-bolder">{{renders.main_title}}</view>
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="types">
				<view class="types min-padding">
					<view class="types_box d-flex justify-content-between align-items-center">
						<view :class="['type section transition_03s', data.sections.current_type == type.type ? 'selected' : '']" v-for="(type, index) in renders.types" :key="index" @click="switchType(type)">
							<view class="cover_box">
								<u--image :src="type.img" width="60rpx" height="60rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
								  <template v-slot:loading>
									 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
								  </template>
								  <template v-slot:error>
									 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
								  </template>
								</u--image>
							</view>
							<view class="name">{{type.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view id="infos">
				<view class="infos min-padding">
					<view class="infos_box section">
						<view class="account page_bg d-flex justify-content-between align-items-center">
							<view class="left d-flex align-items-center section">
								<view class="avatar_box">
									<u--image :src="renders.account.avatar" width="60rpx" height="60rpx" radius="60rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="avatar">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<view class="infos">
									<view class="nickname u-line-1 fw-bolder">{{renders.account.nickname}}</view>
									<view class="tip vice_text">{{renders.account.mobile}}</view>
								</view>
							</view>
							<view class="right">
								<view class="name vice_text">{{renders.account.text}}</view>
								<view class="amount fw-bolder">{{renders.account.amount}}</view>
							</view>
						</view>
						<view class="withdrawal_amount page_bg">
							<view class="form">
								<view class="name fw-bolder">{{renders.inputs.amount.name}}</view>
								<input type="digit" v-model="renders.formData.amount" class="fw-bold input section" placeholder-class="less_text" @blur="computeAmount" :placeholder="renders.inputs.amount.placeholder">
							</view>
						</view>
						<view class="inputs page_bg">
							<view class="form" v-if="data.sections.current_inputs.includes('mobile')">
								<view class="name fw-bolder">{{renders.inputs.mobile.name}}</view>
								<input type="number" v-model="renders.formData.mobile" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.mobile.placeholder">
							</view>
							<view @click="shows.pickerShow = true" class="form" v-if="data.sections.current_inputs.includes('bank_name')">
								<view class="name fw-bolder">{{renders.inputs.bank_name.name}}</view>
								<input type="text" v-model="renders.formData.bank_name" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.bank_name.placeholder">
							</view>
							<view class="form" v-if="data.sections.current_inputs.includes('alipay_login_id')">
								<view class="name fw-bolder">{{renders.inputs.alipay_login_id.name}}</view>
								<input type="text" v-model="renders.formData.alipay_login_id" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.alipay_login_id.placeholder">
							</view>
							<view class="form" v-if="data.sections.current_inputs.includes('real_name')">
								<view class="name fw-bolder">{{renders.inputs.real_name.name}}</view>
								<input type="text" v-model="renders.formData.real_name" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.real_name.placeholder">
							</view>
							<view class="form" v-if="data.sections.current_inputs.includes('card_no')">
								<view class="name fw-bolder">{{renders.inputs.card_no.name}}</view>
								<input type="number" v-model="renders.formData.card_no" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.card_no.placeholder">
							</view>
							<view class="form" v-if="data.sections.current_inputs.includes('id_card')">
								<view class="name fw-bolder">{{renders.inputs.id_card.name}}</view>
								<input type="idcard" v-model="renders.formData.id_card" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.id_card.placeholder">
							</view>
							<view class="form" v-if="data.sections.current_inputs.includes('ecny_number')">
								<view class="name fw-bolder">{{renders.inputs.ecny_number.name}}</view>
								<input type="number" v-model="renders.formData.ecny_number" class="fw-bold input section" placeholder-class="less_text" :placeholder="renders.inputs.ecny_number.placeholder">
							</view>
						</view>
						<view class="amounts page_bg">
							<view class="rows">
								<view class="row d-flex justify-content-between align-items-center">
									<view class="name vice_text">提现金额</view>
									<view class="text fw-bolder">{{renders.amounts.amount ? renders.amounts.amount : '-.--'}}</view>
								</view>
								<view class="row d-flex justify-content-between align-items-center">
									<view class="name vice_text">提现费率</view>
									<view class="text fw-bolder">{{renders.amounts.rate}}%</view>
								</view>
								<view class="row d-flex justify-content-between align-items-center">
									<view class="name vice_text">手续费</view>
									<view class="text fw-bolder">{{renders.amounts.tax}}</view>
								</view>
								<view class="row d-flex justify-content-between align-items-center">
									<view class="name vice_text">实际到账</view>
									<view class="text fw-bolder color">{{renders.amounts.arrival}}</view>
								</view>
							</view>
						</view>
						<view class="pay_password">
							<view class="title fw-bolder">支付密码验证</view>
							<view class="passwords d-flex justify-content-between align-items-center">
								<input type="password" maxlength="1" class="inputer page_bg fw-bolder" v-for="(input, index) in data.sections.password.len" @click="onInput" :key="index" :value="renders.formData.pay_password.length >= index + 1 ? renders.formData.pay_password[index] : ''">
								<input type="number" class="hidden_password" v-if="data.sections.password.focus" @blur="blurInput" @input="setInput" v-model="renders.formData.pay_password" :maxlength="this.data.sections.password.len" :focus="this.data.sections.password.inputFocus">
							</view>
						</view>
						<view class="button button_bg fw-bolder" @click="withdrawalAction">确认申请提现</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<u-picker :show="shows.pickerShow" :columns="bank_list" keyName="name" :defaultIndex="[data.currentIndex]" :closeOnClickOverlay="true"
		 @close="closePicker" @confirm="confirmPicker" @cancel="closePicker" @change="changePicker"></u-picker>
	
		<u-popup :show="shows.error" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" @close="shows.error = false">
			<view class="domxee_popup">
				<view class="section" id="upgrade_popup">
					<view class="title fw-bolder main_text text-center font-44">银行卡信息有误</view>
					<view class="upgrade_box content_box main_text mt-20">
						<view class="upgrade font-30">
							为避免退回，请认真修改银行卡信息
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {
					pickerShow: false,
					error: false
				},
				renders: {
					main_title: "",
					account: {account_id: 0, mobile: '', nickname: '', avatar: '', amount: 0, text: ''},
					types: [{name: '', img: '', type: 0, inputs: []}],
					formData: {type: 0, amount: '', real_name: '', alipay_login_id: '', card_no: '', mobile: '', id_card: '', ecny_number: '', pay_password: '', bank_name: '', user_id: ''},
					inputs: {
						amount: {name: '', placeholder: '', type: ''},
						real_name: {name: '', placeholder: '', type: ''},
						card_no: {name: '', placeholder: '', type: ''},
						bank_name: {name: '', placeholder: '', type: ''},
						
						alipay_login_id: {name: '', placeholder: '', type: ''},
						mobile: {name: '', placeholder: '', type: ''},
						id_card: {name: '', placeholder: '', type: ''},
						ecny_number: {name: '', placeholder: '', type: ''},
					},
					amounts: {amount: '', rate: 0, tax: '', arrival: ''},
					error: false
				},
				data: {
					currentIndex: 0,
					
					sections: {
						current_inputs: [],
						current_type: 0,
						password: {
							len: 6,
							password: '',
							focus: false,
							inputFocus: false,
						}
					},
				},
				bank_list: []
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			that.initInformation();
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType); },
			//拨打电话
			callPhone: function(mobile) {uni.makePhoneCall({phoneNumber: mobile});},
			//复制数据
			clipboardData: function (text) {const that = this;that.nii_common.clipboardData(text);},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;				
				//发起请求
				that.nii_common.request.build('user_score/withdrawals_information', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置数据
					that.renders = res.data;
					that.bank_list = res.data.bank_list;
					that.data.currentIndex = res.data.current_index;
					that.shows.error = res.data.error;
					//设置默认信息
					that.switchType(res.data.types[0]);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			switchType: function (type) {
				//设置对象
				let that = this;
				//设置信息
				that.data.sections.current_inputs = type.inputs;
				that.data.sections.current_type = type.type;
				that.renders.formData.type = type.type;
			},
			onInput: function() {
				console.log(1);
				//设置对象
				let that = this;
				//设置焦点选中
				that.data.sections.password.focus = true;
				that.$nextTick(() => {
					this.data.sections.password.inputFocus = true;
				});
			},
			setInput: function(e) {
				//设置内容
				this.data.sections.password.password = e.detail.value;
			},
			blurInput: function() {
				//取消焦点
				this.data.sections.password.focus = false;
			},
			computeAmount: function () {
				//设置对象
				let that = this;
				//整理金额
				var amount = parseInt(that.renders.formData.amount * 100), tax_amount = 0, arrival_amount = 0;
				//计算费率
				if (that.renders.amounts.rate > 0) {
					//计算手续费
					tax_amount = parseInt(amount * that.renders.amounts.rate / 100);
				}
				//计算金额
				arrival_amount = amount - tax_amount;
				//设置显示金额内容
				that.renders.amounts.amount = (amount/100).toFixed(2);
				that.renders.amounts.tax = (tax_amount/100).toFixed(2);
				that.renders.amounts.arrival = (arrival_amount/100).toFixed(2);
			},
			withdrawalAction: function() {
				//获取对象
				const that = this;
				//loading
				that.nii_common.toastLoading('提现申请...');
				//发起请求
				that.nii_common.request.build('user_score/withdrawals_apply', that.renders.formData, 'POST', function (res) {
					//提示成功
					that.nii_common.toastAlert('申请成功', 'success');
					//跳转钱包页面
					setTimeout(function () {that.navigateAction('user_score.index');}, 1500);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			
			confirmPicker(event){
				console.log(event);
				let that = this;
				that.data.currentIndex = (event.indexs)[0];
				that.renders.formData.bank_name = (event.value)[0]['name'];
				// that.data.sections.formData2.bank_type = (event.value)[0]['name'];
				// that.data.sections.formData2.bank_type2 = (event.value)[0]['name2'];
				that.shows.pickerShow = false;
				console.log(that.renders.formData);
				// console.log(that.data.currentIndex);
			},
			closePicker(event){
				this.shows.pickerShow = false;
			},
			changePicker(event){
				// console.log(event);
				// let that = this;
				// that.data.currentIndex = event.index;
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		.domxee_icon {			
			font-size: 36rpx;
			line-height: 60rpx;
			margin-right: 20rpx;
		}
		.domxee_icon:last-child {
			margin-right: 0;
		}
	}
	#content_wrapper {
		// padding-bottom: 300rpx;
		#types {
			margin-top: 40rpx;
			.types {
				.types_box {
					.type {
						width: 200rpx;
						border-radius: 20rpx;
						text-align: center;
						padding: 20rpx 0;
						.cover_box {
							margin: 0 auto;
							width: 60rpx;
							height: 60rpx;
						}
						.name {
							margin-top: 20rpx;
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
					.selected {
						width: 260rpx;
						padding: 30rpx 0;
						.name {
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}
					}
				}
			}
		}
		#infos {
			margin-top: 30rpx;
			.infos {
				.infos_box {
					border-radius: 20rpx;
					padding: 40rpx 20rpx 60rpx 20rpx;
					.account {
						padding: 20rpx 30rpx;
						border-radius: 20rpx;
						.left {
							margin-right: 50rpx;
							padding: 30rpx 10rpx 30rpx 20rpx;
							border-radius: 20rpx;
							.avatar_box {
								width: 60rpx;
								height: 60rpx;
								margin-right: 10rpx;
							}
							.infos {
								.nickname {
									width: 200rpx;
									font-size: 26rpx;
									line-height: 36rpx;
								}
								.tip {
									margin-top: 10rpx;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
						}
						.right {
							text-align: right;
							.name {
								font-size: 24rpx;
								line-height: 34rpx;
							}
							.amount {
								margin-top: 10rpx;
								font-size: 32rpx;
								line-height: 44rpx;
							}
						}
					}
					.withdrawal_amount {
						margin-top: 30rpx;
						border-radius: 20rpx;
						padding: 50rpx 30rpx;
						.form {
							margin-top: 0;
						}
					}
					.inputs {
						margin-top: 30rpx;
						border-radius: 20rpx;
						padding: 50rpx 30rpx;
						.form:first-child {
							margin-top: 0;
						}
					}
					.form {
						margin-top: 30rpx;
						.name {
							font-size: 28rpx;
							line-height: 40rpx;
						}
						.input {
							margin-top: 20rpx;
							border-radius: 20rpx;
							padding: 20rpx 30rpx;
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
					.amounts {
						border-radius: 20rpx;
						margin-top: 30rpx;
						.rows {
							padding: 40rpx 30rpx;
							.row {
								margin-top: 30rpx;
								.name {
									font-size: 24rpx;
									line-height: 34rpx;
								}
								.text {
									font-size: 28rpx;
									line-height: 40rpx;
								}
							}
							.row:first-child {
								margin-top: 0;
							}
						}
					}
					.pay_password {
						margin-top: 30rpx;
						.title {
							font-size: 24rpx;
							line-height: 34rpx;
						}
						.passwords {
							position: relative;
							margin-top: 30rpx;
							.inputer {
								position: relative;
								width: 100rpx;
								height: 100rpx;
								border-radius: 20rpx;
								line-height: 100rpx;
								font-size: 50rpx;
								text-align: center;
							}
							.hidden_password {
								color: rgba(0, 0, 0, 0);
								opacity: 0;
								height: 100rpx;
								width: 710rpx;
								position: absolute;
								bottom: 0;
								left: 0;
							}
						}
					}
					.button {
						margin-top: 30rpx;
						border-radius: 20rpx;
						padding: 22rpx 0;
						width: 670rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
